<template>
  <div class="home">
     <a-layout id="components-layout-demo-top-side-2">
       <a-layout-header class="header">
         <div class="logo" />
        <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1">
            nav 1
          </a-menu-item>
          <a-menu-item key="2">
            nav 1
          </a-menu-item>
          <a-menu-item key="3">
            nav 1
          </a-menu-item>
          <a-menu-item key="4">
            nav 1
          </a-menu-item>
        </a-menu>
       </a-layout-header>
       <a-layout>
        <a-layout-sider width="200" style="background: #fff">

        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
          >
             <div>
               <a-input-search placeholder="input search text" 
               enter-button
               v-model="seachText" 
               @search="onSearch"/>
             </div>
             <a-table
             :columns="columns"
             :data-source="showList"
             :pagination="{ pageSize: 5, total:showList.length }">
                <template slot="avatar" slot-scope="props">
                  <img :src="props" 
                  :style="{width:'50px',height:'50px'}"/>
                </template>
                <template slot="action" slot-scope="text,record">
                  <a-button type="danger" shape="circle" icon="delete" 
                  @click="onClickDelete(record)"/>
                </template>
                <template slot="created_at" slot-scope="props">
                  <span>{{props | timeFilter}}</span>
                </template>
             </a-table>
         </a-layout-content>
        </a-layout>
       </a-layout>
     </a-layout>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios"
export default {
  name: 'Home',
  components: {
    
  },
  filters:{
    timeFilter:function(value){
      var date = new Date(value*1000).toLocaleString();
      return date;
    }
  },
  data(){
    return{
      userList:[],
      showList:[],
      seachText:"",
      columns:[
        {
         title: 'UID',
         dataIndex: 'uid',
         width:80,
        },
        {
         title: '姓名',
         dataIndex: 'nickname'
        },
        {
         title: '头像',
         dataIndex: 'avatar',
         scopedSlots: { customRender: 'avatar' }
        },
        {
         title: 'mobile',
         dataIndex: 'mobile',
        },
        {
         title: '创建时间',
         dataIndex: 'created_at',
         scopedSlots: { customRender: 'created_at' }
        },
        {
         title: '状态',
         dataIndex: 'status',
        },
        {
         title: '操作',
         dataIndex:"action",
         scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  methods:{
    onSearch(){
      console.log(this.seachText);
      this.showList = [];
      this.userList.forEach(element => {
        if(element.nickname.includes(this.seachText)){
          this.showList.push(element)
        }
      });
    },
    onClickDelete(props){
      console.log(props);
      var index = this.showList.findIndex((element)=>{
        return element.uid===props.uid
      });

      if(index!=-1){
        this.showList.splice(index,1)
      }

      var index1 = this.userList.findIndex((element)=>{
        return element.uid===props.uid
      });

      if(index1!=-1){
        this.userList.splice(index1,1)
      }
    }
  },
  mounted(){
    axios.get("http://localhost:8080/list.json").then((res)=>{
      console.log(res)
      this.userList = res.data;
      this.showList = res.data;
    })
  }
}
</script>
